A tile is a grouping of related information associated with a record.
Basedev ready
Preview
Code
<div class="slds-tile">
<p class="slds-tile__title slds-truncate"><a href="#void">Salesforce UX</a></p>
<div class="slds-tile__detail slds-text-body--small">
<p class="slds-truncate">26 Members</p>
</div>
</div>The base tile is borderless by default.
Listdev ready
Preview
Code
<ul class="slds-list--vertical slds-has-dividers--bottom-space slds-has-selection">
<li class="slds-list__item">
<div class="slds-media slds-tile">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon">
<use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
</svg>
</div>
<div class="slds-media__body">
<p class="slds-tile__title slds-truncate"><a href="#">SLDS_038.zip</a></p>
<ul class="slds-tile__detail slds-list--horizontal slds-has-dividers slds-text-body--small">
<li class="slds-truncate slds-list__item">May 9th, 2015</li>
<li class="slds-truncate slds-list__item">3.6mb</li>
</ul>
</div>
</div>
</li>
<li class="slds-list__item">
<div class="slds-media slds-tile">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon">
<use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
</svg>
</div>
<div class="slds-media__body">
<p class="slds-tile__title slds-truncate"><a href="#">SLDS_037.zip</a></p> has-dividers
<ul class="slds-tile__detail slds-list--horizontal slds-has-dividers slds-text-body--small">
<li class="slds-truncate slds-list__item">May 8th, 2015</li>
<li class="slds-truncate slds-list__item">3.7mb</li>
</ul>
</div>
</div>
</li>
<li class="slds-list__item">
<div class="slds-media slds-tile">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon">
<use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
</svg>
</div>
<div class="slds-media__body">
<p class="slds-tile__title slds-truncate"><a href="#">SLDS_036.zip</a></p>
<ul class="slds-tile__detail slds-list--horizontal slds-has-dividers slds-text-body--small">
<li class="slds-truncate slds-list__item">May 7th, 2015</li>
<li class="slds-truncate slds-list__item">3.9mb</li>
</ul>
</div>
</div>
</li>
</ul>Boarddev ready
Preview
Code
<ul class="slds-list--vertical slds-has-cards--space has-selections">
<li class="slds-list__item">
<div class="slds-tile slds-tile--board">
<p class="slds-tile__title slds-truncate"><a href="#">Cloudhub + Anypoint Connectors</a></p>
<div class="slds-tile__detail">
<p class="slds-text-heading--medium">$500,000</p>
<p class="slds-truncate"><a href="#">Company One</a></p>
<p class="slds-truncate">Closing 9/30/2015</p>
</div>
</div>
</li>
<li class="slds-list__item">
<div class="slds-tile slds-tile--board">
<p class="slds-tile__title slds-truncate"><a href="#">Cloudhub</a></p>
<div class="slds-tile__detail">
<p class="slds-text-heading--medium">$185,000</p>
<p class="slds-truncate"><a href="#">Company Two</a></p>
<p class="slds-truncate slds-has-alert">Closing 12/15/2015</p>
<span class="slds-icon_container slds-tile--board__icon">
<svg aria-hidden="true" class="slds-icon slds-icon-text-warning slds-icon--x-small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
</svg>
<span class="slds-assistive-text">Warning Icon</span>
</span>
</div>
</div>
</li>
<li class="slds-list__item">
<div class="slds-tile slds-tile--board">
<p class="slds-tile__title slds-truncate"><a href="#">600 Widgets</a></p>
<div class="slds-tile__detail">
<p class="slds-text-heading--medium">$35,000</p>
<p class="slds-truncate"><a href="#">Company Three</a></p>
<p class="slds-truncate">Closing 10/12/2015</p>
</div>
</div>
</li>
</ul>Component Overview
Tiles can have different groupings of information based on its context. Pay close attention to the markup, as each tile layout is constructed differently.
To initialize the base tile, apply the .slds-tile class to a containing <div>that contains a tile title (.slds-tile__title). Include other optional elements, such as images, icons, action overflows, and description lists, within the containing <div>.
Usage
| Class Name | Usage | |
|---|---|---|
.slds-tile | Applied to:
Initializes tile | Required: Required Comments:-- |
.slds-tile__title | Applied to:
| Required: Required Comments:-- |
.slds-tile__detail | Applied to:
| Required: Required Comments:-- |
.slds-tile__meta | Applied to:
Applies text color change | Required: No, optional element or modifier Comments:Only used on author tile |
.slds-media | Applied to:
Layout helper that aligns image and text | Required: No, optional element or modifier Comments:Use on tiles with Icons, Actions and Badges |
.slds-media__body | Applied to:
Layout helper | Required: No, optional element or modifier Comments:Wraps |
.slds-truncate | Applied to:Outcome: Applies overflow truncation to tile detail items | Required: No, optional element or modifier Comments:Can be applied to anything that needs truncation |
.slds-list--horizontal | Applied to:
Horizontally aligns list items | Required: No, optional element or modifier Comments:-- |
.slds-has-dividers | Applied to:
Adds dotted dividers in a horizontal list | Required: No, optional element or modifier Comments:-- |
.slds-list--vertical | Applied to:
Vertically aligns list items | Required: No, optional element or modifier Comments:Applied to the list that holds multiple tiles |
.slds-grid | Applied to:Outcome: Initializes a grid layout | Required: No, optional element or modifier Comments:Wrap |
.slds-grid--align-spread | Applied to:
Spreads the elements on each end of the same axis | Required: No, optional element or modifier Comments:-- |
.slds-has-flexi-truncate | Applied to:
Layout helper applied to a parent | Required: No, optional element or modifier Comments:-- |
.slds-hint-parent | Applied to:
Highlights dimmed action overflow icons on tile hover | Required: No, optional element or modifier Comments:-- |